<template>
  <div class="container">
    <picture-text :newstype="trainNew"></picture-text>
    <div class="shotbox">
      <el-row :gutter="20">
        <el-col :md="8" :xs="24" v-for="(item, index) in trainingList" :key="index">
          <el-card :body-style="{ padding: '0px'}" :style="{'margin-bottom':'20px','clear':'both'}">
            <div slot="header">
              <span>{{ item.title }}</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="linkToSearch">查询</el-button>
            </div>
            <div class="box">
              <div class="image">
                <img src="@/assets/logo.jpg" >
              </div>
              <div class="list">
                <div class="text item">
                  {{item.label}}
                </div>
                <div v-if="item.label === '姓名'">
                  {{item.client}}
                </div>
                <div class="text item">
                  {{item.id}}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- <div class="photo-box">
      <image-list :title="imageListTitle"></image-list>
    </div> -->
    <div class="shotbox">
      <div class="title2">
        {{title}}
      </div>
      <div class="photo-list">
        <div class="card-carousel-wrapper">
          <div class="card-carousel--nav__left" @click="moveCarousel(-1)" :disabled="atHeadOfList"></div>
          <div class="card-carousel" :style="{width:carouselWidth + 'px'}">
            <div class="card-carousel--overflow-container">
              <div class="card-carousel-cards" :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')'}">
                <div class="card-carousel--card" style="width: 200px;height: 150px;" v-for="item in items" :key="item.title">
                  <img style="width: 100%;" :src="url + item.filePath">
                </div>
              </div>
            </div>
          </div>
          <div class="card-carousel--nav__right" @click="moveCarousel(1)" :disabled="atEndOfList"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {baseShow} from '@/api/official'
import http from '@/utils/baseUrl'
import PictureText from '@/components/PictureText/index.vue'
// import ImageList from '@/components/ImageList/index.vue'
export default {
  components:{
    PictureText,
    // ImageList
  },
  mounted () {
    this.getWindowWidth()
    this.getPicList()
  },
  data () {
    return {
      trainNew:{
        title:'培训通知',
        type:'培训新闻',
        label:'培训动态'
      },
      title:'培训基地展示',
      url: http,
      currentOffset: 0,
      windowSize: 5,
      paginationFactor: 220,
      carouselWidth:'200',
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      items: [],
      imageListTitle:'培训基地展示',
      trainingList:[
        {
          title:'测评员',
          url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          label:'姓名',
          client:'身份证号',
          id:'证书编码'
        },
        {
          title:'执教',
          url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          label:'姓名',
          client:'身份证号',
          id:'证书编码'
        },
        {
          title:'运动等级',
          url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          label:'姓名',
          client:'身份证号',
          id:'证书编码'
        },
        {
          title:'获奖证书查询',
          url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          label:'姓名',
          client:'身份证号',
          id:'证书编码'
        },
        {
          title:'社会实践查询',
          url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          label:'单位',
          client:'身份证号',
          id:'证书编码'
        },
        {
          title:'培训基地',
          url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          label:'单位',
          client:'身份证号',
          id:'证书编码'
        }
      ]
    }
  },
  computed: {
    atEndOfList() {
      return this.currentOffset <= (this.paginationFactor * -1) * (this.items.length - this.windowSize);
    },
    atHeadOfList() {
      return this.currentOffset === 0;
    },
  },
  // <!--在watch中监听实时宽高-->
  watch: {
    windowWidth (val) {
      let that = this;
      if(val<768) {
        this.carouselWidth = '200'
        this.windowSize = 1
      } else {
        this.carouselWidth = '1080'
        this.windowSize = 5
      }
    }
  },
  methods:{
    getPicList() {
      baseShow().then(res => {
        if(res) {
          this.items = res.data.list
        }
      })
    },
    linkToSearch() {
      this.$router.push('/search');
    },
    moveCarousel(direction) {
      // Find a more elegant way to express the :style. consider using props to make it truly generic
      if (direction === 1 && !this.atEndOfList) {
        this.currentOffset -= this.paginationFactor;
      } else if (direction === -1 && !this.atHeadOfList) {
        this.currentOffset += this.paginationFactor;
      }
    },
    getWindowWidth() {
      let that = this;
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          window.fullWidth = document.documentElement.clientWidth;
          that.windowWidth = window.fullWidth; // 宽
        })()
      };
      if(that.windowWidth<768) {
        this.carouselWidth = '200'
        this.windowSize = 1
      } else {
        this.carouselWidth = '1080'
        this.windowSize = 5
      }
    }
  }
}
</script>
<style scoped>
.image {
  width: 40%;
  float: left;
  padding: 10px;
}
.image img {
  width: 100%;
}
.list {
  width: 40%;
  height: 150px;
  float: left;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.card-carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.card-carousel {
  display: flex;
  justify-content: center;
  /* width: 1080px; */
}
.card-carousel--overflow-container {
  overflow: hidden;
}
.card-carousel--nav__left, .card-carousel--nav__right {
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-top: 2px solid #42b883;
  border-right: 2px solid #42b883;
  cursor: pointer;
  margin: 0 10px;
  transition: transform 150ms linear;
}
.card-carousel--nav__left[disabled], .card-carousel--nav__right[disabled] {
  opacity: 0.2;
  border-color: black;
}
.card-carousel--nav__left {
  transform: rotate(-135deg);
}
.card-carousel--nav__left:active {
  transform: rotate(-135deg) scale(0.9);
}
.card-carousel--nav__right {
  transform: rotate(45deg);
}
.card-carousel--nav__right:active {
  transform: rotate(45deg) scale(0.9);
}

.card-carousel-cards {
  display: flex;
  transition: transform 150ms ease-out;
  transform: translatex(0px);
}
.card-carousel-cards .card-carousel--card {
  margin: 0 10px;
  cursor: pointer;
  box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08);
  background-color: #fff;
  border-radius: 4px;
  z-index: 3;
  margin-bottom: 2px;
}
.card-carousel-cards .card-carousel--card:first-child {
  margin-left: 0;
}
.card-carousel-cards .card-carousel--card:last-child {
  margin-right: 0;
}
.card-carousel-cards .card-carousel--card img {
  vertical-align: bottom;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition: opacity 150ms linear;
  user-select: none;
}
.card-carousel-cards .card-carousel--card img:hover {
  opacity: 0.5;
}
</style>

